<template>
  <div class="fitting-page">
    <navigation-bar />
    
    <!-- Breadcrumb -->
    <div class="breadcrumb">
      <div class="breadcrumb-content">
        <router-link to="/">首页</router-link>
        <span>/</span>
        <span>虚拟试衣</span>
      </div>
    </div>

    <div class="virtual-fitting">
      <!-- 左侧：我的衣服 -->
      <div class="panel-section">
        <h2 class="section-title">我的衣柜</h2>
        <div class="wardrobe-search">
          <a-input-search
            v-model:value="searchText"
            placeholder="搜索衣物"
            style="width: 70%; margin-right: 10px;" 
            @search="handleSearch"
          /> 
          <!-- 添加分类选择器 -->
          <a-select v-model:value="selectedCategory" style="width: 25%">
            <a-select-option v-for="option in categoryOptions" :key="option.value" :value="option.value">
              {{ option.label }}
            </a-select-option>
          </a-select>
        </div>
        <div class="clothes-grid" style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;"> <!-- 一行展示两个卡片 -->
          <template v-if="paginatedClothes && paginatedClothes.length > 0">
            <clothes-card
              v-for="item in paginatedClothes"
              :key="item.id"
              :item="{
                ...item,
                description: item.description || '暂无描述',
                date: ''
              }"
              :class="{ selected: selectedClothes?.id === item.id }"
              @click="selectClothes(item)"
            />
          </template>
          <div v-else class="empty-state">
            <info-circle-outlined style="font-size: 48px; color: #94a3b8;" />
            <p>暂无衣物</p>
          </div>
        </div>
        <div class="pagination-container">
          <a-pagination
            v-model:current="currentPage"
            :total="filteredClothes.length"
            :page-size="pageSize"
            :page-size-options="['4', '8', '12', '16']"
            show-size-changer
            @change="handlePageChange"
            @showSizeChange="handlePageSizeChange"
          />
        </div>
      </div>

      <!-- 中间：上传区域 -->
      <a-card class="panel-section">
        <template #title>
          <div class="section-title">上传照片</div>
        </template>
        <div class="upload-section">
          <!-- 用户形象上传区域 -->
          <div class="upload-area-container">
            <div class="upload-area-header">
              <span>用户形象</span>
              <a-radio-group v-model:value="userPhotoSource" size="small">
                <a-radio-button value="default">使用默认照片</a-radio-button>
                <a-radio-button value="upload">上传新照片</a-radio-button>
              </a-radio-group>
            </div>
            <div v-if="userPhotoSource === 'default'" class="preview-window">
              <img :src="userDefaultPhoto" alt="默认照片" class="preview-image">
              <a-button type="link" @click="userPhotoSource = 'upload'">更换照片</a-button>
            </div>
            <div v-else class="preview-window">
              <a-upload-dragger
                :show-upload-list="false"
                :before-upload="beforeUserUpload"
                @change="handleUserUploadChange"
                class="upload-dragger"
              >
                <template v-if="userImagePreview">
                  <img :src="userImagePreview" alt="预览图" class="preview-image">
                  <a-button type="link" @click="userImagePreview = null">重新上传</a-button>
                </template>
                <template v-else>
                  <p class="ant-upload-drag-icon">
                    <cloud-upload-outlined />
                  </p>
                  <p class="ant-upload-text">点击或拖拽照片到此处</p>
                  <p class="ant-upload-hint">支持 JPG、PNG 格式</p>
                </template>
              </a-upload-dragger>
            </div>
          </div>

          <!-- 衣服上传区域 -->
          <div class="upload-area-container">
            <div class="upload-area-header">
              <span>衣服照片</span>
            </div>
            <div class="clothes-upload-grid">
              <!-- 上衣上传区域 -->
              <div class="upload-section">
                <div class="upload-section-header">
                  <span>上衣</span>
                  <a-radio-group v-model:value="topPhotoSource" size="small">
                    <a-radio-button value="wardrobe">从衣橱选择</a-radio-button>
                    <a-radio-button value="upload">上传新照片</a-radio-button>
                  </a-radio-group>
                </div>
                <div v-if="topPhotoSource === 'wardrobe'" class="preview-window">
                  <div v-if="selectedTop" class="preview-content">
                    <img :src="selectedTop.image" :alt="selectedTop.name" class="preview-image">
                    <a-button type="link" @click="topPhotoSource = 'upload'">更换照片</a-button>
                  </div>
                  <div v-else class="preview-placeholder">
                    <info-circle-outlined />
                    <p>请从左侧衣橱选择一件上衣</p>
                  </div>
                </div>
                <div v-else class="preview-window">
                  <a-upload-dragger
                    :show-upload-list="false"
                    :before-upload="beforeTopUpload"
                    @change="handleTopUploadChange"
                    class="upload-dragger"
                  >
                    <template v-if="topImagePreview">
                      <img :src="topImagePreview" alt="预览图" class="preview-image">
                      <a-button type="link" @click="topImagePreview = null">重新上传</a-button>
                    </template>
                    <template v-else>
                      <p class="ant-upload-drag-icon">
                        <cloud-upload-outlined />
                      </p>
                      <p class="ant-upload-text">点击或拖拽照片到此处</p>
                      <p class="ant-upload-hint">支持 JPG、PNG 格式</p>
                    </template>
                  </a-upload-dragger>
                </div>
              </div>

              <!-- 裤子上传区域 -->
              <div class="upload-section">
                <div class="upload-section-header">
                  <span>裤子</span>
                  <a-radio-group v-model:value="pantsPhotoSource" size="small">
                    <a-radio-button value="wardrobe">从衣橱选择</a-radio-button>
                    <a-radio-button value="upload">上传新照片</a-radio-button>
                  </a-radio-group>
                </div>
                <div v-if="pantsPhotoSource === 'wardrobe'" class="preview-window">
                  <div v-if="selectedPants" class="preview-content">
                    <img :src="selectedPants.image" :alt="selectedPants.name" class="preview-image">
                    <a-button type="link" @click="pantsPhotoSource = 'upload'">更换照片</a-button>
                  </div>
                  <div v-else class="preview-placeholder">
                    <info-circle-outlined />
                    <p>请从左侧衣橱选择一条裤子</p>
                  </div>
                </div>
                <div v-else class="preview-window">
                  <a-upload-dragger
                    :show-upload-list="false"
                    :before-upload="beforePantsUpload"
                    @change="handlePantsUploadChange"
                    class="upload-dragger"
                  >
                    <template v-if="pantsImagePreview">
                      <img :src="pantsImagePreview" alt="预览图" class="preview-image">
                      <a-button type="link" @click="pantsImagePreview = null">重新上传</a-button>
                    </template>
                    <template v-else>
                      <p class="ant-upload-drag-icon">
                        <cloud-upload-outlined />
                      </p>
                      <p class="ant-upload-text">点击或拖拽照片到此处</p>
                      <p class="ant-upload-hint">支持 JPG、PNG 格式</p>
                    </template>
                  </a-upload-dragger>
                </div>
              </div>
            </div>
          </div>
        </div>
      </a-card>

      <!-- 右侧：预览区域 -->
      <a-card class="panel-section">
        <template #title>
          <div class="section-title">预览效果</div>
        </template>
        <div class="preview-window">
          <div v-if="!previewImage" class="preview-placeholder">
            <picture-outlined style="font-size: 48px" />
            <p>上传照片后在此处预览效果</p>
          </div>
          <img v-else :src="previewImage" alt="预览图" style="max-width: 100%; max-height: 100%; object-fit: contain;">
        </div>
        <div class="preview-controls">
          <a-button type="primary" @click="handleSave">
            <template #icon><save-outlined /></template>
            保存效果
          </a-button>
          <a-button type="primary" @click="handleSynthesize">
            <template #icon><play-circle-outlined /></template>
            开始合成
          </a-button>
        </div>
      </a-card>
    </div>

    <page-footer />
  </div>
</template>

<script>
import { defineComponent, ref, computed, onMounted } from 'vue'
import { message } from 'ant-design-vue'
import { useRouter } from 'vue-router'
import {
  CloudUploadOutlined,
  PictureOutlined,
  SaveOutlined,
  PlayCircleOutlined,
  InfoCircleOutlined
} from '@ant-design/icons-vue'
import NavigationBar from '@/components/layout/NavigationBar.vue'
import PageFooter from '@/components/layout/PageFooter.vue'
import { ASelect, ASelectOption } from 'ant-design-vue'
import '@/assets/styles/fitting.css'
import ClothesCard from '@/components/ClothesCard.vue'
import axios from 'axios'

export default defineComponent({
  name: 'FittingPage',
  components: {
    CloudUploadOutlined,
    NavigationBar,
    PageFooter,
    ClothesCard,
    PictureOutlined,
    SaveOutlined,
    PlayCircleOutlined,
    InfoCircleOutlined,
    ASelect,
    ASelectOption
  },
  setup() {
    const router = useRouter()
    const searchText = ref('')
    const selectedCategory = ref('all') 
    const currentPage = ref(1)
    const pageSize = ref(4)
    const previewImage = ref(null)
    const userImage = ref(null)
    const clothesImage = ref(null)
    const selectedClothes = ref(null)
    const userPhotoSource = ref('default')
    const clothesPhotoSource = ref('wardrobe')
    const userImagePreview = ref(null)
    const clothesImagePreview = ref(null)
    const userDefaultPhoto = ref(null)
    const topPhotoSource = ref('wardrobe')
    const pantsPhotoSource = ref('wardrobe')
    const topImagePreview = ref(null)
    const pantsImagePreview = ref(null)
    const selectedTop = ref(null)
    const selectedPants = ref(null)

    const categoryOptions = [
      { value: 'all', label: '全部' },
      { value: 1, label: '上衣' },
      { value: 2, label: '裙装' },
      { value: 3, label: '裤装' },
      { value: 4, label: '外套' },
      { value: 5, label: '鞋子' },
      { value: 6, label: '手表' },
      { value: 7, label: '装饰' }
    ]

    const clothesItems = ref([])

    const fetchClothesList = async () => {
      try {
        const userId = localStorage.getItem('userId')
        const token = localStorage.getItem('token')
        
        if (!userId) {
          console.error('No userId found in localStorage')
          message.error('用户ID不存在，请重新登录')
          router.push('/login')
          return
        }
        
        if (!token) {
          console.error('No token found in localStorage')
          message.error('登录凭证不存在，请重新登录')
          router.push('/login')
          return
        }

        const response = await axios.get(`/api/clothes/users/${userId}`, {
          headers: {
            'Authorization': `Bearer ${token}`,
            'Content-Type': 'application/json',
            'Accept': 'application/json'
          }
        })

        if (response.data.success) {
          clothesItems.value = response.data.data.map(item => ({
            id: item.clothesId || item.id,
            name: item.name,
            categoryId: item.categoryId,
            date: item.createdAt || item.date,
            image: `/api/images/${item.imageUrl.split('/').pop()}`,
            description: item.description || ''
          }))
        } else {
          message.error(response.data.errorMsg || '获取衣物列表失败')
        }
      } catch (error) {
        console.error('获取衣物列表失败:', error)
        message.error('获取衣物列表失败，请重试')
      }
    }

    const fetchUserInfo = async () => {
      try {
        const userId = localStorage.getItem('userId')
        const token = localStorage.getItem('token')
        
        if (!userId) {
          console.error('No userId found in localStorage')
          message.error('用户ID不存在，请重新登录')
          router.push('/login')
          return
        }
        
        if (!token) {
          console.error('No token found in localStorage')
          message.error('登录凭证不存在，请重新登录')
          router.push('/login')
          return
        }

        const response = await axios.get(`/api/user-info/${userId}`, {
          headers: {
            'Authorization': `Bearer ${token}`,
            'Content-Type': 'application/json',
            'Accept': 'application/json'
          }
        })

        if (response.data.success && response.data.data.modelPhotoUrl) {
          userDefaultPhoto.value = `/api/images/${response.data.data.modelPhotoUrl.split('/').pop()}`
        }
      } catch (error) {
        console.error('获取用户信息失败:', error)
        message.error('获取用户信息失败，请重试')
      }
    }

    // 计算属性
    const filteredClothes = computed(() => {
      return clothesItems.value.filter(item => {
        const matchesCategory = selectedCategory.value === 'all' ||
          item.categoryId === selectedCategory.value
        const matchesSearch = !searchText.value ||
          item.name.toLowerCase().includes(searchText.value.toLowerCase())
        return matchesCategory && matchesSearch
      })
    })

    const paginatedClothes = computed(() => {
      const start = (currentPage.value - 1) * pageSize.value
      const end = start + pageSize.value
      return filteredClothes.value.slice(start, end)
    })

    // 在组件挂载时调用
    onMounted(() => {
      fetchClothesList()
      fetchUserInfo()
    })

    const beforeUserUpload = (file) => {
      const isImage = file.type.startsWith('image/')
      if (!isImage) {
        message.error('只能上传图片文件！')
        return false
      }
      const isLt5M = file.size / 1024 / 1024 < 5
      if (!isLt5M) {
        message.error('图片大小不能超过 5MB！')
        return false
      }
      return true
    }

    const handleUserUploadChange = (info) => {
      if (info.file.status === 'uploading') {
        // 创建预览URL
        const reader = new FileReader()
        reader.onload = (e) => {
          userImagePreview.value = e.target.result
        }
        reader.readAsDataURL(info.file.originFileObj)
        userImage.value = info.file.originFileObj
      }
      if (info.file.status === 'done') {
        message.success('用户照片上传成功')
      }
    }

    const beforeTopUpload = (file) => {
      const isImage = file.type.startsWith('image/')
      if (!isImage) {
        message.error('只能上传图片文件！')
        return false
      }
      const isLt5M = file.size / 1024 / 1024 < 5
      if (!isLt5M) {
        message.error('图片大小不能超过 5MB！')
        return false
      }
      return true
    }

    const handleTopUploadChange = (info) => {
      if (info.file.status === 'uploading') {
        // 创建预览URL
        const reader = new FileReader()
        reader.onload = (e) => {
          topImagePreview.value = e.target.result
          selectedTop.value = {
            id: Date.now(),
            name: info.file.name,
            image: e.target.result,
            description: '新上传的上衣'
          }
        }
        reader.readAsDataURL(info.file.originFileObj)
      }
      if (info.file.status === 'done') {
        message.success('上衣照片上传成功')
      }
    }

    const beforePantsUpload = (file) => {
      const isImage = file.type.startsWith('image/')
      if (!isImage) {
        message.error('只能上传图片文件！')
        return false
      }
      const isLt5M = file.size / 1024 / 1024 < 5
      if (!isLt5M) {
        message.error('图片大小不能超过 5MB！')
        return false
      }
      return true
    }

    const handlePantsUploadChange = (info) => {
      if (info.file.status === 'uploading') {
        // 创建预览URL
        const reader = new FileReader()
        reader.onload = (e) => {
          pantsImagePreview.value = e.target.result
          selectedPants.value = {
            id: Date.now(),
            name: info.file.name,
            image: e.target.result,
            description: '新上传的裤子'
          }
        }
        reader.readAsDataURL(info.file.originFileObj)
      }
      if (info.file.status === 'done') {
        message.success('裤子照片上传成功')
      }
    }

    const selectClothes = (item) => {
      selectedClothes.value = item
      
      // 根据衣物类型设置对应的选择
      if (item.categoryId === 1 || item.categoryId === 2 || item.categoryId === 4) { // 上衣、裙装、外套
        selectedTop.value = item
        topPhotoSource.value = 'wardrobe'
        message.success(`已选择上衣：${item.name}`)
      } else if (item.categoryId === 3) { // 裤子
        selectedPants.value = item
        pantsPhotoSource.value = 'wardrobe'
        message.success(`已选择裤子：${item.name}`)
      } else {
        message.warning('请选择上衣或裤子')
      }
    }

    const handleSave = async () => {
      if (!previewImage.value) {
        message.warning('请先合成图片')
        return
      }

      try {
        // 获取图片数据
        const response = await fetch(previewImage.value)
        const blob = await response.blob()
        
        // 创建下载链接
        const url = window.URL.createObjectURL(blob)
        const link = document.createElement('a')
        link.href = url
        
        // 设置文件名
        const timestamp = new Date().toISOString().replace(/[:.]/g, '-')
        link.download = `virtual-tryon-${timestamp}.jpg`
        
        // 触发下载
        document.body.appendChild(link)
        link.click()
        
        // 清理
        document.body.removeChild(link)
        window.URL.revokeObjectURL(url)
        
        message.success('图片已保存')
      } catch (error) {
        console.error('保存失败:', error)
        message.error('保存失败，请重试')
      }
    }

    const handleSynthesize = async () => {
      try {
        // ==================== 验证逻辑 ====================
        // 1. 验证用户照片
        if (userPhotoSource.value === 'upload') {
          if (!userImagePreview.value) {
            message.warning('请上传用户照片');
            return;
          }
        } else if (userPhotoSource.value === 'default' && !userDefaultPhoto.value) {
          message.warning('默认用户照片不可用');
          return;
        }

        // 2. 验证上衣照片
        if (topPhotoSource.value === 'wardrobe') {
          if (!selectedTop.value?.image) {
            message.warning('请从衣柜选择上衣');
            return;
          }
        } else {
          if (!topImagePreview.value) {
            message.warning('请上传上衣照片');
            return;
          }
        }

        // 3. 验证裤子照片
        if (pantsPhotoSource.value === 'wardrobe') {
          if (!selectedPants.value?.image) {
            message.warning('请从衣柜选择裤子');
            return;
          }
        } else {
          if (!pantsImagePreview.value) {
            message.warning('请上传裤子照片');
            return;
          }
        }

        // ==================== 文件处理 ====================
        const formData = new FormData();
        const token = localStorage.getItem('token');

        // 1. 处理用户照片
        if (userPhotoSource.value === 'default') {
          // 从后端获取默认照片
          const response = await axios.get(userDefaultPhoto.value, {
            responseType: 'blob',
            headers: { Authorization: `Bearer ${token}` }
          });
          const file = new File([response.data], 'user.jpg', { type: 'image/jpeg' });
          formData.append('personImage', file);
        } else {
          // 处理上传的用户照片
          const base64Data = userImagePreview.value.split(',')[1];
          const byteCharacters = atob(base64Data);
          const byteArrays = [];
          for (let i = 0; i < byteCharacters.length; i++) {
            byteArrays.push(byteCharacters.charCodeAt(i));
          }
          const blob = new Blob([new Uint8Array(byteArrays)], { type: 'image/jpeg' });
          formData.append('personImage', blob, 'user_upload.jpg');
        }

        // 2. 处理上衣照片
        if (topPhotoSource.value === 'wardrobe') {
          // 从衣柜获取上衣照片
          const response = await axios.get(selectedTop.value.image, {
            responseType: 'blob',
            headers: { Authorization: `Bearer ${token}` }
          });
          const file = new File([response.data], 'top.jpg', { type: 'image/jpeg' });
          formData.append('topGarment', file);
        } else {
          // 处理上传的上衣照片
          const base64Data = topImagePreview.value.split(',')[1];
          const byteCharacters = atob(base64Data);
          const byteArrays = [];
          for (let i = 0; i < byteCharacters.length; i++) {
            byteArrays.push(byteCharacters.charCodeAt(i));
          }
          const blob = new Blob([new Uint8Array(byteArrays)], { type: 'image/jpeg' });
          formData.append('topGarment', blob, 'top_upload.jpg');
        }

        // 3. 处理裤子照片
        if (pantsPhotoSource.value === 'wardrobe') {
          // 从衣柜获取裤子照片
          const response = await axios.get(selectedPants.value.image, {
            responseType: 'blob',
            headers: { Authorization: `Bearer ${token}` }
          });
          const file = new File([response.data], 'pants.jpg', { type: 'image/jpeg' });
          formData.append('bottomGarment', file);
        } else {
          // 处理上传的裤子照片
          const base64Data = pantsImagePreview.value.split(',')[1];
          const byteCharacters = atob(base64Data);
          const byteArrays = [];
          for (let i = 0; i < byteCharacters.length; i++) {
            byteArrays.push(byteCharacters.charCodeAt(i));
          }
          const blob = new Blob([new Uint8Array(byteArrays)], { type: 'image/jpeg' });
          formData.append('bottomGarment', blob, 'pants_upload.jpg');
        }

        // ==================== 发送请求 ====================
        message.loading('合成中...', 0);
        
        // 调试：打印实际发送的文件信息
        console.log('发送的文件:', {
          personImage: formData.get('personImage')?.name,
          topGarment: formData.get('topGarment')?.name,
          bottomGarment: formData.get('bottomGarment')?.name
        });

        const response = await axios.post('http://localhost:8080/vr-tryon/try-on', formData, {
          headers: {
            'Authorization': `Bearer ${token}`,
            'Content-Type': 'multipart/form-data'
          },
          timeout: 60000
        });

        // ==================== 处理响应 ====================
        if (response.data?.success) {
          previewImage.value = response.data.data;
          message.success('合成成功');
        } else {
          throw new Error(response.data?.errorMsg || '合成失败');
        }
      } catch (error) {
        console.error('合成错误详情:', {
          message: error.message,
          response: error.response?.data,
          config: error.config
        });
        
        let errorMsg = '合成失败';
        if (error.response) {
          const responseData = error.response.data;
          if (typeof responseData === 'string') {
            try {
              const jsonMatch = responseData.match(/\{.*\}/);
              if (jsonMatch) {
                const parsedError = JSON.parse(jsonMatch[0]);
                errorMsg = parsedError.errorMsg || errorMsg;
              } else {
                errorMsg = responseData;
              }
            } catch (e) {
              errorMsg = responseData;
            }
          } else if (typeof responseData === 'object') {
            errorMsg = responseData.errorMsg || errorMsg;
          }
        }
        
        message.error(errorMsg);
      } finally {
        message.destroy();
      }
    };

    const handlePageChange = (page) => {
      currentPage.value = page
    }

    const handlePageSizeChange = (current, size) => {
      pageSize.value = size
      currentPage.value = 1
    }

    return {
      searchText,
      selectedCategory,
      categoryOptions,
      filteredClothes,
      paginatedClothes,
      previewImage,
      userImage,
      clothesImage,
      userImagePreview,
      clothesImagePreview,
      selectedClothes,
      userPhotoSource,
      clothesPhotoSource,
      currentPage,
      pageSize,
      userDefaultPhoto,
      topPhotoSource,
      pantsPhotoSource,
      topImagePreview,
      pantsImagePreview,
      selectedTop,
      selectedPants,
      beforeUserUpload,
      handleUserUploadChange,
      beforeTopUpload,
      handleTopUploadChange,
      beforePantsUpload,
      handlePantsUploadChange,
      selectClothes,
      handleSave,
      handleSynthesize,
      handlePageChange,
      handlePageSizeChange
    }
  }
})
</script>

<style scoped>
.fitting-page {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 1rem;
}

.virtual-fitting {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2rem;
  padding: 2rem 0;
  width: 100%;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  color: #64748b;
  padding: 2rem;
  text-align: center;
  width: 100%;
}

.panel-section {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  padding: 1.5rem;
}

.section-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 1.5rem;
}

.upload-area-container {
  margin-bottom: 2rem;
}

.upload-area-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #f0f0f0;
}

.upload-area-header span {
  font-size: 1.125rem;
  font-weight: 500;
  color: #1e293b;
}

.clothes-upload-grid {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.upload-section {
  border: 1px solid #f0f0f0;
  border-radius: 12px;
  padding: 1.5rem;
  background-color: #fff;
}

.upload-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.upload-section-header span {
  font-size: 1rem;
  font-weight: 500;
  color: #1e293b;
}

.preview-window {
  min-height: 250px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 2px dashed #e2e8f0;
  border-radius: 12px;
  padding: 2rem;
  background-color: #f8fafc;
  transition: border-color 0.3s;
}

.preview-window:hover {
  border-color: #0ea5e9;
}

.preview-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.preview-image {
  max-width: 100%;
  max-height: 300px;
  object-fit: contain;
  border-radius: 8px;
}

.preview-info {
  text-align: center;
  width: 100%;
  padding: 1rem;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.preview-info h4 {
  margin: 0;
  font-size: 1rem;
  color: #1e293b;
}

.description {
  color: #64748b;
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
}

.preview-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  color: #64748b;
  text-align: center;
}

.preview-placeholder :deep(svg) {
  font-size: 48px;
  color: #94a3b8;
}

.ant-upload-drag-icon {
  font-size: 48px;
  color: #0ea5e9;
  margin-bottom: 1rem;
}

.ant-upload-text {
  font-size: 1rem;
  color: #1e293b;
  margin-bottom: 0.5rem;
}

.ant-upload-hint {
  font-size: 0.875rem;
  color: #64748b;
}

.preview-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1.5rem;
}

.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 1.5rem;
}

@media (max-width: 1200px) {
  .virtual-fitting {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1.5rem;
    padding: 1.5rem 0;
  }
}

@media (max-width: 992px) {
  .virtual-fitting {
    grid-template-columns: 1fr;
  }
  
  .panel-section {
    margin-bottom: 1.5rem;
  }
}

@media (max-width: 768px) {
  .virtual-fitting {
    padding: 1rem 0;
  }
  
  .panel-section {
    padding: 1rem;
  }
  
  .preview-window {
    min-height: 200px;
    padding: 1.5rem;
  }
}
</style>

